{% extends 'base_dashboard.html' %}

{% block title %}{{ lesson.title }} — Online LMS{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{% url 'courses:course_detail' slug=course.slug %}">{{ course.title|truncatechars:30 }}</a></li>
                <li class="breadcrumb-item text-muted">{{ module.title }}</li>
                <li class="breadcrumb-item active">{{ lesson.title|truncatechars:25 }}</li>
            </ol>
        </nav>
        <h4 class="fw-bold mb-0">{{ lesson.title }}</h4>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <!-- Video -->
        {% if lesson.video_url %}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-0">
                <div class="ratio ratio-16x9 rounded-4">
                    {% if 'youtube' in lesson.video_url or 'youtu.be' in lesson.video_url %}
                        {% with video_id=lesson.video_url|slice:"-11:" %}
                        <iframe src="https://www.youtube.com/embed/{{ video_id }}" allowfullscreen class="rounded-4"></iframe>
                        {% endwith %}
                    {% else %}
                        <iframe src="{{ lesson.video_url }}" allowfullscreen class="rounded-4"></iframe>
                    {% endif %}
                </div>
            </div>
        </div>
        {% elif lesson.video_file %}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-0">
                <video controls class="w-100 rounded-4" style="max-height:400px;">
                    <source src="{{ lesson.video_file.url }}">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        {% endif %}

        <!-- Lesson Content -->
        {% if lesson.content %}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-3">Lesson Content</h5>
                <div class="text-muted">{{ lesson.content|linebreaks }}</div>
            </div>
        </div>
        {% endif %}

        <!-- Attachment -->
        {% if lesson.attachment %}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-3">
                <div class="d-flex align-items-center gap-3">
                    <i class="bi bi-paperclip text-primary fs-4"></i>
                    <div>
                        <div class="fw-medium small">Lesson Attachment</div>
                        <div class="text-muted small">Download supplementary material</div>
                    </div>
                    <a href="{{ lesson.attachment.url }}" download class="btn btn-outline-primary btn-sm ms-auto">
                        <i class="bi bi-download me-1"></i>Download
                    </a>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Navigation -->
        <div class="d-flex justify-content-between">
            {% if prev_lesson %}
            <a href="{% url 'courses:lesson_detail' pk=prev_lesson.pk %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Previous: {{ prev_lesson.title|truncatechars:25 }}
            </a>
            {% else %}
            <span></span>
            {% endif %}
            {% if next_lesson %}
            <a href="{% url 'courses:lesson_detail' pk=next_lesson.pk %}" class="btn btn-primary">
                Next: {{ next_lesson.title|truncatechars:25 }} <i class="bi bi-arrow-right ms-1"></i>
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Sidebar: Course Outline -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4" style="max-height:600px;overflow-y:auto;">
            <div class="card-header bg-white rounded-top-4 fw-bold p-3 border-0">
                <i class="bi bi-list-ul me-2"></i>Course Outline
            </div>
            <div class="list-group list-group-flush">
                {% for mod in course.modules.all %}
                <div class="list-group-item bg-light fw-semibold small py-2 px-3">
                    <i class="bi bi-folder2 me-1 text-primary"></i>{{ mod.title }}
                </div>
                {% for les in mod.lessons.all %}
                <a href="{% url 'courses:lesson_detail' pk=les.pk %}"
                   class="list-group-item list-group-item-action py-2 px-4 small {% if les.pk == lesson.pk %}active{% endif %}">
                    {% if les.video_url or les.video_file %}
                        <i class="bi bi-play-circle me-1"></i>
                    {% else %}
                        <i class="bi bi-file-text me-1"></i>
                    {% endif %}
                    {{ les.title }}
                </a>
                {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}